import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/bean/bean_news.dart';
import 'package:flutter_learn_vi/src/page/common/common_nodata_widget.dart';
import 'package:flutter_learn_vi/src/utils/navigator_utils.dart';

import 'news_detaile_page.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2020/12/10.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///
/// 代码清单
///代码清单
///代码清单 5-27 TabBarView 中使用的标签页面
///lib/code/code5/example_504_CustomScrollView.dart
class NewsHomeItemPage extends StatefulWidget {
  final List<NewsBean> list;

  //点击暂无数据回调
  final Function() clickCallback;

  NewsHomeItemPage({@required this.list, this.clickCallback});

  @override
  State<StatefulWidget> createState() {
    return _NewsHomeItemPageState();
  }
}

class _NewsHomeItemPageState extends State<NewsHomeItemPage>
    with AutomaticKeepAliveClientMixin {
  //标签页面保活 或者称保持状态
  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    if (widget.list == null || widget.list.length == 0) {
      return Center(
        child: NoDataWidget(
          clickCallBack: () {
            if (widget.clickCallback != null) {
              widget.clickCallback();
            }
          },
        ),
      );
    }
    //一个列表 切记不要再使用 Scaffold
    //否则会拦截事件 失去滑动联动效果
    return ListView.builder(
      //去除内边距
      padding: EdgeInsets.all(0),
      //列表子Item个数
      itemCount: widget.list.length,
      //每个子Item的布局构建
      itemBuilder: (BuildContext context, int index) {
        return buildBodyWidget(index);
      },
    );
  }

  //每个子Item的布局构建
  Widget buildBodyWidget(int index) {
    NewsBean newsBean = widget.list[index];

    //水波纹点击事件监听
    return InkWell(
      //手指点击抬起时的回调
      onTap: () {
        //打开新的页面
        NavigatorUtils.pushPage(
          context,
          NewsDetailePage(
            newsId: newsBean.id,
            screenSize: MediaQuery.of(context).size,
          ),
        );
        //showWebViewPage(context: context, pageUrl: newsBean.detailUrl);
      },
      child: Container(
        margin: EdgeInsets.only(top: 1),
        padding: EdgeInsets.all(10),
        color: Colors.white,
        //线性布局左右排列
        child: Column(
          mainAxisSize: MainAxisSize.min,
          //主轴方向开始对齐 在这里是左对齐
          mainAxisAlignment: MainAxisAlignment.start,
          //交叉轴上开始对齐 在这里是顶部对齐
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            //左侧的图片
            buildLeftImage(newsBean),
            SizedBox(
              height: 10,
            ),
            //右侧的文本区域
            Text(
              "${newsBean.title}",
              softWrap: true,
              overflow: TextOverflow.ellipsis,
              maxLines: 3,
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }

  ///左侧的图片区域
  Container buildLeftImage(NewsBean newsBean) {
    double radius = 10;

    String url = newsBean.bannerImgUrl;
    if (url == null) {
      url = newsBean.coverImgUrl;
    }
    return Container(
      margin: EdgeInsets.only(right: 12),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueGrey),
        borderRadius: BorderRadius.all(Radius.circular(radius)),
      ),
      padding: EdgeInsets.all(2),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(radius)),
        child: Container(
          child: CachedNetworkImage(
            imageUrl: url,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.fill,
          ),
        ),
      ),
    );
  }
}
